import React, { useState, DragEvent } from 'react';
import classNames from 'classnames';

/**
 * Dragger 组件属性接口
 */
interface DraggerProps {
  /** 文件拖拽完成回调函数 */
  onFile: (files: FileList) => void;
  /** 子元素 */
  children?: React.ReactNode;
}

/**
 * Dragger 拖拽上传组件
 * 
 * 支持拖拽文件到指定区域进行上传
 * 提供拖拽状态的视觉反馈
 * 
 * @param props - Dragger 组件属性
 * @returns 渲染的拖拽区域
 */
export const Dragger: React.FC<DraggerProps> = (props) => {
  const { onFile, children } = props;
  const [dragOver, setDragOver] = useState(false);
  
  const klass = classNames('viking-uploader-dragger', {
    'is-dragover': dragOver
  });

  /**
   * 处理拖拽进入事件
   * @param e - 拖拽事件对象
   */
  const handleDrop = (e: DragEvent<HTMLElement>) => {
    e.preventDefault();
    setDragOver(false);
    onFile(e.dataTransfer.files);
  };

  /**
   * 处理拖拽悬停事件
   * @param e - 拖拽事件对象
   * @param over - 是否悬停在拖拽区域上
   */
  const handleDrag = (e: DragEvent<HTMLElement>, over: boolean) => {
    e.preventDefault();
    setDragOver(over);
  };

  return (
    <div 
      className={klass}
      onDragOver={e => { handleDrag(e, true)}}
      onDragLeave={e => { handleDrag(e, false)}}
      onDrop={handleDrop}
    >
      {children}
    </div>
  );
};

export default Dragger;